<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_类式组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<script type="text/babel" >
    // 1.创建组件
    class Weather extends React.Component{

        // 构造器调用几次 ————— 1次
        constructor(props){
            super(props)

            // 初始化状态

            this.state = {
                isHot: false,
            }

            this.changeWeather = this.changeWeather.bind(this)

        }
        // render 调用几次？ —————— 1+n次 1是初始化的那次，n是状态更新的次数
        render(){
            const {isHot} = this.state;
            return <h1 onClick={this.changeWeather}>今天天气很{this.isHot ? '炎热' : '凉爽'}</h1>
        }

        // changeWeather调用几次？ ————— 点几次调几次
        changeWeather() {
            // changeWeather放在哪里？ —————— Weather的原型对象上，供实例使用
            // 由于 changeWeather 是作为onClick的回调， 所以不是通过实例调用的，是直接调用
            // 类中的方法默认开启了局部的严格模式，所以 changeWeather 中的 this 为 undefined

            // 获取原来的 isHot 值
            const isHot = this.state.isHot
            // 严重注意: 状态必须通过setState进行更新，且更新是一种合并，不是替换
            this.setState({isHot: !isHot})
            console.log(this);
        }
    }
    ReactDOM.render(<Weather/>, document.getElementById('test'))
	</script>
</body>
</html>